<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交互式学习目标跟踪器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 2.5rem;
        }
        
        .subtitle {
            color: #7f8c8d;
            font-size: 1.1rem;
        }
        
        .goals-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        
        .goal-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .goal-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .goal-card.active {
            border-left: 5px solid #3498db;
        }
        
        .goal-card.completed {
            border-left: 5px solid #2ecc71;
        }
        
        .goal-card.overdue {
            border-left: 5px solid #e74c3c;
        }
        
        .goal-title {
            font-size: 1.4rem;
            margin-bottom: 15px;
            color: #2c3e50;
            display: flex;
            align-items: center;
        }
        
        .goal-title i {
            margin-right: 10px;
            font-size: 1.2rem;
        }
        
        .goal-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            font-size: 0.9rem;
            color: #7f8c8d;
        }
        
        .goal-date {
            background: #ecf0f1;
            padding: 5px 10px;
            border-radius: 20px;
            font-weight: 500;
        }
        
        .goal-type {
            background: #3498db;
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-weight: 500;
        }
        
        .progress-container {
            margin-bottom: 20px;
        }
        
        .progress-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 0.9rem;
            color: #7f8c8d;
        }
        
        .progress-bar {
            height: 10px;
            background: #ecf0f1;
            border-radius: 5px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            border-radius: 5px;
            transition: width 0.5s ease;
        }
        
        .progress-60 {
            width: 60%;
            background: linear-gradient(90deg, #3498db, #2ecc71);
        }
        
        .progress-80 {
            width: 80%;
            background: linear-gradient(90deg, #3498db, #2ecc71);
        }
        
        .progress-30 {
            width: 30%;
            background: linear-gradient(90deg, #3498db, #f39c12);
        }
        
        .goal-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        
        .btn {
            padding: 8px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        .btn-toggle {
            background: #3498db;
            color: white;
        }
        
        .btn-toggle:hover {
            background: #2980b9;
        }
        
        .btn-details {
            background: #ecf0f1;
            color: #7f8c8d;
        }
        
        .btn-details:hover {
            background: #bdc3c7;
        }
        
        .status-indicator {
            position: absolute;
            top: 0;
            right: 0;
            padding: 5px 15px;
            border-bottom-left-radius: 8px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .status-completed {
            background: #2ecc71;
            color: white;
        }
        
        .status-in-progress {
            background: #3498db;
            color: white;
        }
        
        .status-not-started {
            background: #e74c3c;
            color: white;
        }
        
        .goal-details {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #ecf0f1;
        }
        
        .goal-details.active {
            max-height: 200px;
        }
        
        .details-content {
            font-size: 0.9rem;
            color: #7f8c8d;
        }
        
        .details-content ul {
            margin-left: 20px;
            margin-top: 10px;
        }
        
        .view-all {
            text-align: center;
            margin-top: 30px;
        }
        
        .btn-view-all {
            background: #2c3e50;
            color: white;
            padding: 12px 30px;
            border-radius: 30px;
            font-size: 1rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-view-all:hover {
            background: #34495e;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .notification {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: #2ecc71;
            color: white;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transform: translateY(100px);
            opacity: 0;
            transition: all 0.5s ease;
        }
        
        .notification.active {
            transform: translateY(0);
            opacity: 1;
        }
        
        @media (max-width: 768px) {
            .goals-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>学习目标跟踪器</h1>
            <p class="subtitle">跟踪您的学习进度，实现学术目标</p>
        </header>
        
        <div class="goals-container">
            <!-- 目标1 -->
            <div class="goal-card active" data-id="1">
                <div class="status-indicator status-in-progress">进行中</div>
                <h2 class="goal-title"><i>📚</i> 完成数学函数章节</h2>
                <div class="goal-meta">
                    <span class="goal-date">截止: 10月30日</span>
                    <span class="goal-type">学习</span>
                </div>
                <div class="progress-container">
                    <div class="progress-label">
                        <span>完成进度</span>
                        <span>60%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill progress-60"></div>
                    </div>
                </div>
                <div class="goal-actions">
                    <button class="btn btn-toggle" data-id="1">标记完成</button>
                    <button class="btn btn-details" data-id="1">查看详情</button>
                </div>
                <div class="goal-details" id="details-1">
                    <div class="details-content">
                        <p>本章节包含以下内容：</p>
                        <ul>
                            <li>函数的基本概念</li>
                            <li>一次函数与二次函数</li>
                            <li>指数函数与对数函数</li>
                            <li>三角函数</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- 目标2 -->
            <div class="goal-card" data-id="2">
                <div class="status-indicator status-in-progress">进行中</div>
                <h2 class="goal-title"><i>🔤</i> 背诵50个英语单词</h2>
                <div class="goal-meta">
                    <span class="goal-date">每日任务</span>
                    <span class="goal-type">语言</span>
                </div>
                <div class="progress-container">
                    <div class="progress-label">
                        <span>完成进度</span>
                        <span>80%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill progress-80"></div>
                    </div>
                </div>
                <div class="goal-actions">
                    <button class="btn btn-toggle" data-id="2">标记完成</button>
                    <button class="btn btn-details" data-id="2">查看详情</button>
                </div>
                <div class="goal-details" id="details-2">
                    <div class="details-content">
                        <p>今日单词列表：</p>
                        <ul>
                            <li>acquire - 获得</li>
                            <li>comprehensive - 全面的</li>
                            <li>diligent - 勤奋的</li>
                            <li>elaborate - 详细的</li>
                            <li>facilitate - 促进</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- 目标3 -->
            <div class="goal-card" data-id="3">
                <div class="status-indicator status-in-progress">进行中</div>
                <h2 class="goal-title"><i>🔬</i> 物理实验报告</h2>
                <div class="goal-meta">
                    <span class="goal-date">截止: 11月5日</span>
                    <span class="goal-type">实验</span>
                </div>
                <div class="progress-container">
                    <div class="progress-label">
                        <span>完成进度</span>
                        <span>30%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill progress-30"></div>
                    </div>
                </div>
                <div class="goal-actions">
                    <button class="btn btn-toggle" data-id="3">标记完成</button>
                    <button class="btn btn-details" data-id="3">查看详情</button>
                </div>
                <div class="goal-details" id="details-3">
                    <div class="details-content">
                        <p>实验报告要求：</p>
                        <ul>
                            <li>实验目的与原理</li>
                            <li>实验步骤与方法</li>
                            <li>数据记录与分析</li>
                            <li>结论与思考</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- 目标4 -->
            <div class="goal-card completed" data-id="4">
                <div class="status-indicator status-completed">已完成</div>
                <h2 class="goal-title"><i>📝</i> 作业</h2>
                <div class="goal-meta">
                    <span class="goal-date">已完成</span>
                    <span class="goal-type">作业</span>
                </div>
                <div class="progress-container">
                    <div class="progress-label">
                        <span>完成进度</span>
                        <span>100%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill progress-80" style="width: 100%; background: #2ecc71;"></div>
                    </div>
                </div>
                <div class="goal-actions">
                    <button class="btn btn-toggle" data-id="4" disabled>已完成</button>
                    <button class="btn btn-details" data-id="4">查看详情</button>
                </div>
                <div class="goal-details" id="details-4">
                    <div class="details-content">
                        <p>已完成的作业：</p>
                        <ul>
                            <li>数学练习册第3章</li>
                            <li>英语阅读理解</li>
                            <li>物理习题集</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="view-all">
            <button class="btn-view-all">查看全部目标</button>
        </div>
    </div>
    
    <div class="notification" id="notification">
        目标状态已更新！
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有目标卡片
            const goalCards = document.querySelectorAll('.goal-card');
            const toggleButtons = document.querySelectorAll('.btn-toggle');
            const detailButtons = document.querySelectorAll('.btn-details');
            const notification = document.getElementById('notification');
            
            // 为每个目标卡片添加点击事件
            goalCards.forEach(card => {
                card.addEventListener('click', function(e) {
                    // 防止按钮点击触发卡片点击事件
                    if (!e.target.classList.contains('btn')) {
                        // 切换活动状态
                        goalCards.forEach(c => c.classList.remove('active'));
                        this.classList.add('active');
                        
                        // 显示通知
                        showNotification('已选择: ' + this.querySelector('.goal-title').textContent);
                    }
                });
            });
            
            // 为切换按钮添加点击事件
            toggleButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.stopPropagation(); // 防止事件冒泡到卡片
                    const goalId = this.getAttribute('data-id');
                    const goalCard = document.querySelector(`.goal-card[data-id="${goalId}"]`);
                    
                    if (!goalCard.classList.contains('completed')) {
                        // 标记为已完成
                        goalCard.classList.add('completed');
                        goalCard.classList.remove('active', 'overdue');
                        
                        // 更新状态指示器
                        const statusIndicator = goalCard.querySelector('.status-indicator');
                        statusIndicator.textContent = '已完成';
                        statusIndicator.className = 'status-indicator status-completed';
                        
                        // 更新进度条
                        const progressFill = goalCard.querySelector('.progress-fill');
                        progressFill.style.width = '100%';
                        progressFill.style.background = '#2ecc71';
                        
                        // 更新进度标签
                        const progressLabel = goalCard.querySelector('.progress-label span:last-child');
                        progressLabel.textContent = '100%';
                        
                        // 更新按钮
                        this.textContent = '已完成';
                        this.disabled = true;
                        
                        // 显示通知
                        showNotification('目标已完成！');
                    }
                });
            });
            
            // 为详情按钮添加点击事件
            detailButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.stopPropagation(); // 防止事件冒泡到卡片
                    const goalId = this.getAttribute('data-id');
                    const details = document.getElementById(`details-${goalId}`);
                    
                    // 切换详情显示
                    if (details.classList.contains('active')) {
                        details.classList.remove('active');
                        this.textContent = '查看详情';
                    } else {
                        // 关闭其他打开的详情
                        document.querySelectorAll('.goal-details').forEach(d => {
                            d.classList.remove('active');
                        });
                        document.querySelectorAll('.btn-details').forEach(b => {
                            b.textContent = '查看详情';
                        });
                        
                        details.classList.add('active');
                        this.textContent = '收起详情';
                    }
                });
            });
            
            // 查看全部按钮
            document.querySelector('.btn-view-all').addEventListener('click', function() {
                showNotification('正在加载全部目标...');
            });
            
            // 显示通知函数
            function showNotification(message) {
                notification.textContent = message;
                notification.classList.add('active');
                
                setTimeout(() => {
                    notification.classList.remove('active');
                }, 3000);
            }
        });
    </script>
</body>
</html>